<template>
  <div>
    <ul>
      <li v-for="(department, index) in departments" :key="index">
        <div>
          <span>{{ department.departmentsName }}</span>
          <ul v-if="department.childrenList && department.childrenList.length > 0">
            <DepartmentTree :departments="department.childrenList" />
          </ul>
          <ul v-else>
            <li v-for="(doctor, doctorIndex) in department.medicalDoctorList" :key="doctorIndex">
              <table class="doctor-table">
                <tr>
                  <td>医生姓名</td>
                  <td>{{ doctor.name }}</td>
                  <td>性别</td>
                  <td>{{ doctor.sex }}</td>
                  <td>出生日期</td>
                  <td>{{ doctor.birthDate }}</td>
                  <td>电话</td>
                  <td>{{ doctor.phone }}</td>
                  <td>地址</td>
                  <td>{{ doctor.address }}</td>
                  <td>执照编号</td>
                  <td>{{ doctor.licenseNumber }}</td>
                  <td>执照颁发日期</td>
                  <td>{{ doctor.licenseissueDate }}</td>
                  <td>执照过期日期</td>
                  <td>{{ doctor.licenseExpireDate }}</td>
                  <td>部门 ID</td>
                  <td>{{ doctor.departmentId }}</td>
                  <td>简介</td>
                  <td>{{ doctor.bio }}</td>
                  <td>状态</td>
                  <td>{{ doctor.status }}</td>
                </tr>
              </table>
            </li>
            <li v-if="department.medicalDoctorList.length === 0">
              <p>该科室暂无医生信息。</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'DepartmentTree',
  props: {
    departments: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const departments = ref(props.departments);
    // 打印 departments 数据到控制台
    console.log('Departments data:', departments.value);
    return {
      departments
    };
  }
};
</script>

<style scoped>
ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

.doctor-table {
  border-collapse: collapse;
  width: 100%;
}

.doctor-table td {
  border: 1px solid #ddd;
  padding: 5px;
  /* 调整列宽 */
  min-width: 100px;
}
</style>
